<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../../static/plugins/css/iconfont.css">
    <link rel="stylesheet" href="../../static/plugins/css/common.css">
    <link rel="stylesheet" href="../../static/User/css/personal.css">

    <!-- jQuery -->
    <script src="../../static/plugins/jquery-3.6.1.min.js"></script>
</head>
<link rel="stylesheet" href="../../static/plugins/css/bootstrap-modal.css">
</link>

<body>
    <script type="text/javascript">
        $.ajax({
            url: "http://localhost:9001/sysController/info",
            type: 'GET',
            contentType: false,
            processData: false,
            dataType: 'json',
            cache: false,
            success: function (dt) {
                if (dt.code === 202) {
                    window.location.href = '../Mall/login.html';
                }
                data = dt.data;
                console.log(data);
                if (data) {
                    var account = data.account;
                    console.log(account);
                    var username = data.username;
                    $("#username").text(account);
                    $("#username_update").val(username);
                    var phone = data.phone;
                    $("#phone").text(phone);
                    $("#phone_update").val(phone);
                    var age = data.age;
                    $("#age").text(age);
                    $("#age_update").val(age);
                    var password = data.password;
                    $("#password").text(password);
                    $("#password_update").val(password);
                }
            }
        })
    </script>
    <div id="personal">
        <div class="self-info center">

            <!-- sidebar -->
            <!--        <div th:replace="mall/personal-sidebar::sidebar-fragment"></div>-->

            <div class="intro fr">
                <div class="grzlbt ml40">
                    我的资料
                    <a href="javascript:openUpdateModal();" style="color:#1baeae;margin-left: 600px;">更改个人信息</a>
                </div>
                <div class="info_item ml40">
                    <span>账户</span>
                    <span id="account">
                        账户
                    </span>
                </div>
                <div class="info_item ml40">
                    <span>昵称</span>
                    <span id="username">
                        昵称
                    </span>
                </div>
                <div class="info_item ml40">
                    <span>手机号</span>
                    <span id="phone">
                        手机号
                    </span>
                </div>
                <div class="info_item ml40">
                    <span>年龄</span>
                    <span id="age">
                        年龄
                    </span>
                </div>
                <div class="info_item ml40">
                    <span>密码</span>
                    <span>
                        ****
                    </span>
                </div>
                <div class="info_item ml40">
                    <span>邮箱</span>
                    <span id="email">
                        邮箱
                    </span>
                </div>
                <div class="info_item ml40">
                    <span>角色</span>
                    <span id="role">
                        角色
                    </span>
                </div>
                <div class="info_item ml40">
                    <span>收货信息</span>
                    <span id="address">
                        暂无收货地址
                    </span>
                </div>
                <button onclick="exit()">推出</button>
            </div>
            <div class="clear"></div>
        </div>
        <div class="content">
            <!-- 模态框（Modal） -->
            <div class="modal fade" id="personalInfoModal" tabindex="-1" role="dialog"
                aria-labelledby="personalInfoModalLabel">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                    aria-hidden="true">&times;</span></button>
                            <h6 class="modal-title" id="personalInfoModalLabel">个人信息修改</h6> 
                        </div>
                        <div class="modal-body">
                            <form id="personalInfoForm">
                                <div class="form-group">
                                    <label for="username_update" class="control-label">昵称:</label>
                                    <input type="hidden" id="userId" value="${session.newBeeMallUser.userId}">
                                    <input type="text" class="form-control" id="username_update" name="username_update"
                                        placeholder="请输入昵称" required="true">
                                </div>
                                <div class="form-group">
                                    <label for="phone_update" class="control-label">电话:</label>
                                    <input type="text" class="form-control" id="phone_update" name="phone_update"
                                        placeholder="请输入电话" required="true">
                                </div>
                                <div class="form-group">
                                    <label for="age_update" class="control-label">年龄:</label>
                                    <input type="text" class="form-control" id="age_update" name="age_update"
                                        placeholder="请输入年龄" required="true">
                                </div>
                                <div class="form-group">
                                    <label for="address_update" class="control-label">收货信息:</label>
                                    <input type="text" class="form-control" id="address_update" name="address"
                                        placeholder="请输入收货信息" required="true">
                                </div>
                            </form>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                            <button type="button" class="btn btn-primary" id="saveButton">确认</button>
                        </div>
                    </div>
                </div>
            </div>
            <!-- /.modal -->
        </div>
    </div>

    <!--<div th:replace="mall/footer::footer-fragment"></div>-->

    <!-- Bootstrap 3 -->
    <script src="../../static/plugins/js/bootstrap3.js"></script>
    <script src="../../static/User/js/search.js" type="text/javascript"></script>
    <script src="../../static/plugins/sweetalert/sweetalert.min.js"></script>
    <script type="text/javascript">
        function openUpdateModal() {
            $('#personalInfoModal').modal('show');
        }

        //绑定modal上的保存按钮
        $('#saveButton').click(function () {
            var address = $("#address_update").val();
            if (address.trim().length < 10) {
                swal("收货信息不少于10字,请输入正确的收货信息", {
                    icon: "error",
                });
                return;
            }
            var introduceSign = $("#phone_update").val();
            if (introduceSign.trim().length != 11) {
                swal("请输入正确的电话", {
                    icon: "error",
                });
                return;
            }
            var nickName = $("#username_update").val();
            if (nickName.trim().length < 2) {
                swal("请输入正确的昵称", {
                    icon: "error",
                });
                return;
            }
            var userId = $("#userId").val();
            var data = {
                "userId": userId,
                "address": address,
                "introduceSign": introduceSign,
                "nickName": nickName
            };
            $.ajax({
                type: 'POST',//方法类型
                url: 'post.json',
                contentType: 'json',
                data: JSON.stringify(data),
                success: function (result) {
                    if (result.resultCode == 200) {
                        $('#personalInfoModal').modal('hide');
                        window.location.reload();
                    } else {
                        $('#personalInfoModal').modal('hide');
                        alert(result.message);
                    }
                    ;
                },
                error: function () {
                    alert('操作失败');
                }
            });
        });
        function exit(){

            $.ajax({
            type: "GET",
            url: 'http://localhost:9001/sysController/exit',
            success: function (result) {
                console.log(result);
                console.log("data is :" + result)
                if (result.code == 200) {
                    alert("退出成功");
                    window.location.href = '../Mall/index.html';
                    
                }else {
                    alert(result.message)
                }
            }
        });
        }
    </script>
</body>

</html>